<!--地图切换 -->
<template>
  <div id="map-change-main" >
    <Dropdown  @on-click="menuClick">
<!--      -->
      <Button type="text" size="small" >{{ customMap }}<Icon type="ios-arrow-down"></Icon></Button>
      <DropdownMenu slot="list">
<!--        <Dropdown placement="left-start" v-for="(item,index) in mapData.mainMenu" :key="index">
          <DropdownItem :name="item.name" :disabled="item.disabled" :selected="item.selected">
            {{ item.desc }}
            <Icon type="ios-arrow-forward"></Icon>
          </DropdownItem>
          <DropdownMenu slot="list">
            <DropdownItem v-for="(subItem,subIndex) in mapData.mainMenu[index].sub" :key="subIndex"
                          :name="subItem.name" :disabled="subItem.disabled" :selected="subItem.selected"
            > {{subItem.desc}} </DropdownItem>
          </DropdownMenu>

        </Dropdown>-->
        <template v-for="(item) in mapData.mainMenu">
          <DropdownItem disabled :visible="false">
            <Dropdown placement="left-start" >
              <DropdownItem  :name="item.name" :disabled="item.disabled" :selected="item.selected" >{{ item.desc }}  <Icon type="ios-arrow-forward"></Icon></DropdownItem>
              <DropdownMenu slot="list">
                <DropdownItem v-for="(subItem,index1) in item.sub" :key="index1" :name="subItem.name" :disabled="subItem.disabled || item.disabled" :selected="subItem.selected">{{subItem.desc}}</DropdownItem>
              </DropdownMenu>
            </Dropdown>
          </DropdownItem>
        </template>
      </DropdownMenu>
    </Dropdown>
  </div>
</template>
<script>
import MapToolsData from "@/view/Home/map/maptools/data/MapToolsData";
import MapInfo from "@/view/Home/map/maptools/data/MapInfo";

export default {
  data(){
    return{
      mapToolsData: new MapToolsData(),
      customMap: this.$t('map_vendor'),
      mapData:{
        subMenu:null,
        mainMenu:null,
        toolsMenu:null,
      },
    }
  },
  methods:{
    /**
     * 主地图切换
     */
    menuClick(menuName) {
      //console.log(">>>>>>>>>>>MapChane.menuClick menuName=%o",menuName);
      for (let i in this.mapData.mainMenu) {
        if (!!this.mapData.mainMenu[i].sub){
          for(let j in this.mapData.mainMenu[i].sub){
            if (this.mapData.mainMenu[i].sub[j].name === menuName && this.mapData.mainMenu[i].sub[j].selected == true) {
              return;
            }
            if (this.mapData.mainMenu[i].sub[j].name == menuName){
              //console.log(">>>>>>>>>>>MapChane.menuClick 选中主菜单=%o；子菜单=%o",this.mapData.mainMenu[i].desc,this.mapData.mainMenu[i].sub[j].desc);
              //this.customMap = this.mapData.mainMenu[i].desc + "->" + this.mapData.mainMenu[i].sub[j].desc;
              this.customMap =this.mapData.mainMenu[i].sub[j].desc;
              //console.log(this.customMap);
              this.mapData.subMenu = this.mapData.mainMenu[i].sub;

              this.current = this.mapData.mainMenu[i];
              const subData = this.changeSubMenu(menuName);
              console.log(">>>>>>>>> MapChane.changeSubMenu  subData=%o",subData);
              if (!!subData){
                this.$emit('mapMenuclick', subData)
              }
              return subData;

            }
          }
        }
      }
      return null;
    },
    /**
     * 菜单类型点击
     * @param subMenuName
     */
    changeSubMenu(subMenuName){
      //console.log('changeSubMenu();subMenuName=%o',subMenuName);
      let subMenus = this.mapData.subMenu;
      //判断是否点击已选择的这个
      for(let i in subMenus){
        if (subMenus[i].name === subMenuName && subMenus[i].selected === true){
          return null;
        }
      }

      let subData=null;
      for(let i in subMenus){
        if (subMenuName == subMenus[i].name){
          /** 换地图 */
          subMenus[i].disabled = true;
          subMenus[i].selected = true;
          this.mapType=subMenus[i].desc;
          subData={name: subMenus[i].name,map:this.current};
          if (!!subMenus[i].url){subData.url=subMenus[i].url;}
        }else{
          subMenus[i].disabled = false;
          subMenus[i].selected = false;
        }
      }
      if (!!subData) {
        subData.mapName=this.customMap;
        subData.mapType=this.mapType;
        new MapInfo().localSet(subData);
        return subData;
      }
    },

  },
  mounted(){
    //动态 生成菜单项
    this.mapData.mainMenu = this.mapToolsData.getMapSource();
    //console.log(this.mapData.mainMenu);
    this.mapData.toolsMenu = this.mapToolsData.getDrawTools();
    //console.log(">>>>>>> MapChange.mounted: mapData=%o",this.mapData)
  }

}
</script>
<style lang="less">
#map-change-main{
  width: 100%;
  height: 100%;

}
</style>
<style lang="less">

//黑色菜单
//改变IVIEW组件的样式

/*
.ivu-btn-text {
  color: #c9ced9;
  background-color: transparent;
  border-color: transparent;
}
.ivu-btn:hover{
  background-color: #860ba8;
  color: #FFFFFF;
}
.ivu-dropdown-item {
  color: #f0f1f5;
}
.ivu-dropdown-item:hover{
  //color: #515a6e;
  background: #860ba8;
  color: #FFFFFF;
}
.ivu-dropdown-menu {
  background: rgba(0, 21, 41, 0.70);
}
.ivu-select-dropdown {
  background-color: #001529 !important;
}
.ivu-dropdown-item-selected, .ivu-dropdown-item.ivu-dropdown-item-selected:hover {
  background: #a1b9e0;
  color: #212121;
}*/


</style>
